<template>
	<view class="page">
		<!-- 轮播图 start-->
		<swiper :indicator-dots="true" :autoplay="true" :circular="true" class="slide">
			<swiper-item v-for="item in slideList" :key="item.id" @click="toMovieInfo(item.movieId)">
				<image :src="item.image" class="img"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播 end -->
		
		<!-- 菜单 start-->
		<view class="menu">
			<uni-grid :column="4" :show-border="false" :square="false">
				<uni-grid-item v-for="(item ,index) in menuList" :index="index" :key="index">
					<view class="grid-item-box">
						<image class="image" :src="item.icon" mode="aspectFill" />
						<text class="text">{{item.name}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 菜单 end -->
		
		<!-- 公告 start-->
		<view class="notice">
			<uni-notice-bar :show-icon="true" :scrollable="true" :single="true" text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
		</view>
		<!-- 公告 end -->
		
		<!-- 精选文章 start-->
		<view class="bac-white hot">
			<view class="wrapper">
				<image src="../../static/yugao.png" class="icon"></image>
				<view class="title">
					精选文章
				</view>
			</view>
		</view>
		<view class="uni-list">
			<block v-for="(value, index) in articleList" :key="index">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goArticleDetail(value)">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" :src="value.thumb"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">{{ value.title }}</view>
							<view class="uni-media-list-text-bottom">
								<text>{{ value.author_name }}</text>
								<text>{{ value.create_time }}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 精选文章 end -->
		
		<!-- 精选课程 start-->
		<view class="bac-white hot">
			<view class="wrapper">
				<image src="../../static/like.png" class="icon-like"></image>
				<view class="title">
					精选课程
				</view>
			</view>
		</view>
		<view class="like-content bac-white" v-for="(item,index) in courseList" :key="item.id"  v-if="courseList && courseList.length">
			<image :src="item.thumb" class="like-image" @click="goCourseDetail(item.id)"></image>
			<view class="movie-desc" @click="goCourseDetail(item.id)">
				<view class="title">{{item.title}}</view>
				<view class="tag">{{item.update_time}}</view>
				<view class="tag">{{item.price}}</view>
			</view>
		</view>
		<!-- 精选课程 end -->
	</view>
</template>

<script>

export default {
	components: {

	},
	data() {
		return {
			slideList: [],
			menuList: [],
			courseList: [],
			articleList: [],
			animationData: {},
			animationDataArr: [],
			currentIndex: null
		}
	},
	onNavigationBarSearchInputClicked() {
		uni.navigateTo({
			url: '../course/search'
		})
	},
	onReady() {
		
	},
	onLoad() {
		uni.showLoading({
			title: '加载中'
		})
		// #ifdef APP-PLUS || MP-WEIXIN
		// 初始化动画对象 h5端不支持
		this.animation = uni.createAnimation({})
		// #endif
		// 获取轮播
		this.getSlide()
		// 获取菜单
		this.getMenu()
		// 获取文章
		this.getArticle()
		// 获取课程
		this.getCourse()
	},
	// 下拉监听
	onPullDownRefresh() {
		this.getCourse()
	},
	onUnload() {
		// 清除动画
	},
	methods: {
		// 获取幻灯片
		getSlide() {
			this.$store.dispatch('request', {
				url: "slides"
			}).then((res) => {
				this.slideList = res.data
			})
		},
		// 获取菜单
		getMenu() {
			this.$store.dispatch('request', {
				url: "menus"
			}).then((res) => {
				this.menuList = res.data
			})
		},
		// 获取课程
		getCourse() {
			this.$store.dispatch('request', {
				url: "course/top"
			}).then((res) => {
				this.courseList = res.data
				uni.stopPullDownRefresh()
				setTimeout(function () {
					uni.hideLoading();
				}, 500)
			})
		},
		getArticle() {
			this.$store.dispatch('request', {
				url: "article/top"
			}).then((res) => {
				this.articleList = res.data
			})
		},
		// 跳转详情页
		goCourseDetail(id) {
			uni.navigateTo({
				url: '../course/detail?id=' + id
			})
		},
		// 跳转详情页
		goArticleDetail: function(e) {
			let detail = {
				id: e.id,
				title: e.title
			};
			uni.navigateTo({
				url: '../article/detail?payload=' + encodeURIComponent(JSON.stringify(detail))
			});
		},
	}
}
</script>

<style lang="scss">
	.active{
		.button-item{
			color: #fff !important;
		}
	}
	.slide{
		width: 100%;
		height: 440upx;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.menu {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
		.grid-item-box {
			flex: 1;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
			.image {
				width: 80rpx;
				height: 80rpx;
			}
			.text {
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
	}
	.notice {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}
	
	.uni-media-list-logo {
		width: 120upx;
	}
	
	// 热门推荐
	.hot{
		.wrapper{
			display: flex;
			align-items: center;
			justify-items: center;
			padding: 15upx;
			.icon{
				height: 50upx;
				width: 50upx;
			}
			.icon-like{
				width: 45upx;
				height: 45upx;
				padding-top: 5upx;
				padding-left: 5upx;
			}
			.title{
				font-size: 40upx;
				margin-left: 15upx;
				font-weight: 900;
			}
		}
	}
	// 热门推荐内容
	.hot-content{
		width: 100%;
		white-space: nowrap;
		.single-poster{
			display: inline-block;
			margin-left: 20upx;
			line-height: 40upx;
			&:last-child{
				margin-right: 20upx;
			}
			.wrapper{
				display: flex;
				flex-direction: column;
				.poster-image{
					width: 200upx;
					height: 270upx;
				}
				.name{
					font-weight: bold;
					margin-top: 10upx;
					text-align: center;
					width: 200upx;
					font-size: 28upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.rate{
					width: 200upx;
					display: flex;
					align-items: center;
					justify-content: center;
					.text-rate{
						font-size: 24upx;
						color: coral;
					}
				}
			}
		}
	}
	.movie{
		width: 350upx;
		height: 220upx;
	}
	.like-content{
		display: flex;
		padding: 20upx;
		.like-image{
			height: 180upx;
			width: 240upx;
			border-radius: 3%;
		}
		.movie-desc{
			width: 360upx;
			padding: 0upx 20upx;
			line-height: 45upx;
			.title{
				font-size: 32upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.tag{
				font-size: 26upx;
				color: #808080;
			}
		}
	}
</style>
